<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 在输入框中输入字符时，如果按下CapsLock键切换为大写模式，则输入框下方显示提示“当前已切换为大写模式！”

再次按下CapsLock键，下方提示消失。 -->

    <script src="./vue.js"></script>
    <div id="app">
        <input type="text" name="" id="" @keyup.20="check">
        <h1>{{str}}</h1>
    </div>
    

</body>

<script>
let vue=new Vue({
    el:"#app",
    data:{
        str:""
    },
    methods: {
        check(){
          if(this.str=="换为大写模式"){
            this.str=""
          }else{
            this.str="换为大写模式"
          }
          
        }
    },
})
</script>
</html>